﻿<link rel="stylesheet" type="text/css" href="~/Content/themes/base/jquery-ui.css"/>
<link rel="stylesheet" href="~/Scripts/jquery-fileupload/jquery.fileupload-ui.css" />
@model Vms.Web.Models.PROGRAM
@{
    Vms.Web.Models.SCREEN _screen = Model.SCREEN;
    List<Vms.Web.Models.PROGRAM> _programs = _screen.PROGRAMS.ToList();

    List<Vms.Web.Models.CONTENT> _contents = Model.CONTENTS.ToList();
    Vms.Web.Models.CONTENT _content = _contents.Single();

    List<Vms.Web.Models.CONTENT_TXT> _contentTexs = _content.CONTENT_TXT.ToList();
    Vms.Web.Models.CONTENT_TXT _contentTex = _contentTexs.Single();

    List<Vms.Web.Models.CONTENT_IMG> _contentImgs = _content.CONTENT_IMG.ToList();
    Vms.Web.Models.CONTENT_IMG _contentImg = _contentImgs.Single();
}
@section scripts
{
<script src="~/Scripts/tabcontent.js"></script>

<script>
    $(function () {
        // init Image
        var urlImg = $('#dragThisImg_Url').attr('href');
        var imgWidth = $('#dragThisImg_Width').attr('href');
        var imgHeight = $('#dragThisImg_Height').attr('href');
        var imgX = $('#dragThisImg_X').attr('href');
        var imgY = $('#dragThisImg_Y').attr('href');
        $('#dragThisImg').css("background", 'url(' + urlImg + ') no-repeat');
        $('#dragThisImg').css("width", '' + imgWidth + 'px');
        $('#dragThisImg').css("height", '' + imgHeight + 'px');
        $('#dragThisImg').css("left", '' + imgX + 'px');
        $('#dragThisImg').css("top", '' + imgY + 'px');

        // init Text
        var txtFileName = $('#dragThisTxt_FileName').attr('href');
        var txtWidth = $('#dragThisTxt_Width').attr('href');
        var txtHeight = $('#dragThisTxt_Height').attr('href');
        var txtX = $('#dragThisTxt_X').attr('href');
        var txtY = $('#dragThisTxt_Y').attr('href');
        $('#dragThisText').css("width", '' + txtWidth + 'px');
        $('#dragThisText').css("height", '' + txtHeight + 'px');
        $('#dragThisText').css("left", '' + txtX + 'px');
        $('#dragThisText').css("top", '' + txtY + 'px');

        $("#dragThisImg").resizable({
            maxHeight: 250,
            maxWidth: 350,
            minHeight: 10,
            minWidth: 10,
            resize: function (event, ui) {
                var w = $(this).width();
                var h = $(this).height();

                $("#contentImg_Width").attr('value', '' + w);
                $("#contentImg_Height").attr('value', '' + h);
                $("#height").val($(this).height());
                $('#dragThisImg').css("background-size", '' + w + 'px' + ' ' + h + 'px');
            }
        });
        $("#dragThisImg").draggable({ containment: "parent",
            drag: function (event, ui) {
                var top = $(this).position().top;
                var left = $(this).position().left;
                $("#x").val(left);
                $("#y").val(top);
                $("#contentImg_X").attr('value', '' + left);
                $("#contentImg_Y").attr('value', '' + top);
                $("#width").val($(this).width());
                $("#height").val($(this).height());
            }
        });
        $("#dragThisText").resizable({
            maxHeight: 250,
            maxWidth: 350,
            minHeight: 10,
            minWidth: 10,
            resize: function (event, ui) {
                var w = $(this).width();
                var h = $(this).height();

                $("#contentTxt_Width").attr('value', '' + w);
                $("#contentTxt_Height").attr('value', '' + h);
                $("#width").val($(this).width());
                $("#height").val($(this).height());
            }
        });
        $("#dragThisText").draggable({ containment: "parent",
            drag: function (event, ui) {
                var top = $(this).position().top;
                var left = $(this).position().left;
                $("#x").val(left);
                $("#y").val(top);
                $("#contentTxt_X").attr('value', '' + left);
                $("#contentTxt_Y").attr('value', '' + top);
                $("#width").val($(this).width());
                $("#height").val($(this).height());
            }
        });

    });
</script>
}


<!-- CSS scream view -->

<style>

#leftsidebar
{
    width: 135px;
    float: left;
}
#rightcontent
{
    width: 790px;
    float: right;
    border: 1px solid #DDDDDD;
    background-color: #fff; 

}
#screenContainer
{
    position: relative;
    background-color: #333333;
    height: 150px;
    margin-left: 40px;
    margin-top: 20px;
    margin-bottom: 20px;
    width: 700px;    
}

#dragThisImg
{
    width:  60px;
    height: 60px;
    border: 1px solid #ccc;           
    background-repeat: no-repeat;
}
#dragThisText
{
    width: 400px;
    height: 40px;
    border: 1px solid #ccc;

}
#dragThisText label
{
    font-family: Tahoma;
    font-weight: bold;
    font-size:   20px;
    line-height: 30px;   
    color: Red; 
}

#contentContainer
{
    margin:10px;
    padding-top:10px;
}
#contentContainer input
{
    width: 80px;
}
#contentContainer select
{
    width: 90px;
}
#contentContainer input[type=checkbox]
{
    width: auto;
}
.program-form  
{
    padding: 10px;
}
.program-form  .editor-label
{
    float: left;
    padding-top: 5px;
    text-align: right;
    width: 80px;
}
.program-form  .editor-field
{
    margin-left: 90px;
}
.program-form legend {
    font-size: 12px;
    font-weight: bold;
    margin-top: -5px;
    margin-bottom:0px;
    width:auto;
    border: none;
    line-height:normal;
}
.program-form fieldset {
    border: 1px solid #DDDDDD;
    margin: 10px 0 1.5em;
    padding: 10px 10px;
}
.program-form span
{
    width: 80px;
    display:block;
    float:left;
}
.btn-bar 
{
    margin: 10px;
    text-align: center;
}
#view2_img1
{
    width: 280px;
    height: auto;
    padding: 10px;
    float:left;
    border-right: 1px solid #B7B7B7; 

}
#view2_txt1
{

    width: 435px;
    height: auto;
    padding: 10px;
    float:right;
    margin-right: 10px;

}
#view2_img1 td, #view2_txt1 td
{
    width: 90px;
}
.content-form input
{
    width:80px;    
}
.content-form select
{
    width:90px;    
}
.content-form tr > td:first-child
{
    text-align: right;
    width: 100px;
    padding-right:5px;
}

/* Tab Content Css */
ul.tabs
{
    margin: 0 0 3px 0;
    list-style-type: none;
}
        
ul.tabs li
{
    display: inline;
    margin: 0;
    margin-right:3px; /*distance between tabs*/
}
        
ul.tabs li a
{
    font: normal 12px Verdana;
    text-decoration: none;
    position: relative;
    z-index: 1;
    padding: 5px 16px;
    border: 1px solid #CCC;
    border-bottom-color:#B7B7B7;
    color: #000;
    background: white;
    border-radius: 2px 2px 0 0;
    outline:none;
}
ul.tabs li a:visited
{
    color: #000;
}
        
ul.tabs li a:hover
{
    border: 1px solid #B7B7B7;
    background:#F0F0F0 url(tabbg.gif) 0 -36px repeat-x;
}
        
ul.tabs li.selected a
{
    /*selected tab style */
    position: relative;
    font-weight:bold;
    
    background-color: #F5F5F5;
    border: 1px solid #B7B7B7;
    border-bottom-color: #F5F5F5;
}
div.tabcontents
{
    width: auto;
    border: 1px solid #B7B7B7; 
    background-color: #F5F5F5;
    border-radius: 0 2px 2px 2px;
}

.bs-docs-sidenav {
    background-color: #FFFFFF;
    border-radius: 6px 6px 6px 6px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
    margin: 000px 0 0;
    padding: 0;
    width: 133px;
    position:fixed;
}
.bs-docs-sidenav > li > a {
}
.bs-docs-sidenav > li > a {
    border: 1px solid #E5E5E5;
    display: block;
    margin: 0 0 -1px;
    padding: 8px 14px;
}
</style>


<div>
    <div id="leftsidebar">
    
            <ul class="nav nav-list bs-docs-sidenav affix-top">
            <li><a><h2>Screen 1</h2></a></li>
            <li><a href="#">Program name</a></li>
            <li class="active"><a href="#">Program name</a></li>            
            @foreach (var item in _programs)
            {
                <li>@Html.ActionLink(@item.Id.ToString(), "Edit", new { id = @item.Id })</li>
            }
        </ul>
    </div>

    <div id="rightcontent">
        <div id="screenContainer">
        
            <!-- demo drag imgs Tung: 28/3/2013 -->
            <div id="dragThisImg" >
                <ul>
                    <a id="dragThisImg_Url" href="~/Areas/Lib/Lib_Data/Imgs/@_contentImg.ImgFileName"></a>
                    <a id="dragThisImg_Width" href="@_contentImg.Img_Width"></a>
                    <a id="dragThisImg_Height" href="@_contentImg.Img_Height"></a>
                    <a id="dragThisImg_X" href="@_contentImg.Img_x"></a>
                    <a id="dragThisImg_Y" href="@_contentImg.Img_y"></a>
                </ul>
            </div>
            <div id="dragThisText">
                <label>@_contentTex.Txt</label>
                <ul>
                    <a id="dragThisTxt_FileName" href="@_contentTex.TxtFileName"></a>
                    <a id="dragThisTxt_Width" href="@_contentTex.Txt_Width"></a>
                    <a id="dragThisTxt_Height" href="@_contentTex.Txt_Height"></a>
                    <a id="dragThisTxt_X" href="@_contentTex.Txt_x"></a>
                    <a id="dragThisTxt_Y" href="@_contentTex.Txt_y"></a>
                </ul>
            </div>
        </div>
        <div id="contentContainer">
                <ul class="tabs" persist="true">
                    <li><a href="#" rel="view1">Program</a></li>
                    <li><a href="#" rel="view2">Content</a></li>
                </ul>
                @using (Html.BeginForm("UpdateData", "ContentProgram", FormMethod.Post, new {id = @Model.Id }))
                {
                <!-- tabcontents-->
                <div class="tabcontents">
                    <!-- Program content-------------------------------------------------------------->
                    <div id="view1" class="tabcontent">
                    <div class="program-form">
                        <div class="control-group" style="margin-top: 10px; margin-left: 13px;">
                            <div class="editor-label">
                                @Html.LabelFor(model => model.Name)
                            </div>
                            <div class="editor-field">
                                @Html.EditorFor(model => model.Name)
                                @Html.ValidationMessageFor(model => model.Name)
                            </div>
                        </div>
                        <fieldset>
                            <legend>Play Aging
                                <input type="checkbox" name="chk_group" value="value1" /></legend>
                            <div >
                                <div style="width: 200px; float: left">
                                    <div class="editor-label">
                                        @Html.LabelFor(model => model.StartYear)
                                    </div>
                                    <div class="editor-field">
                                        @Html.EditorFor(model => model.StartYear)
                                        @Html.ValidationMessageFor(model => model.StartYear)
                                    </div>
                                </div>
                                <div style="margin-left: 200px;">
                                    <div class="editor-label">
                                        @Html.LabelFor(model => model.EndYear)
                                    </div>
                                    <div class="editor-field">
                                        @Html.EditorFor(model => model.EndYear)
                                        @Html.ValidationMessageFor(model => model.EndYear)
                                    </div>
                                </div>
                            </div>
                        </fieldset>
                        <fieldset>
                            <legend>Playing Time
                                <input type="checkbox" name="chk_group" value="value1" /></legend>
                            <div>
                                <div style="width: 200px; float: left">
                                    <div class="editor-label">
                                        @Html.LabelFor(model => model.StartHour)
                                    </div>
                                    <div class="editor-field">
                                        @Html.EditorFor(model => model.StartHour)
                                        @Html.ValidationMessageFor(model => model.StartYear)
                                    </div>
                                </div>
                                <div style="margin-left: 200px;">
                                    <div class="editor-label">
                                        @Html.LabelFor(model => model.EndHour)
                                    </div>
                                    <div class="editor-field">
                                        @Html.EditorFor(model => model.EndHour)
                                        @Html.ValidationMessageFor(model => model.EndYear)
                                    </div>
                                </div>
                            </div>
                        </fieldset>
                        <fieldset >
                            <legend>Play Weekly  <input type="checkbox" name="chk_group" value="value1" /></legend>
                        <div style="padding-left:50px;">
                            @{
                    var _monChecked = "";
                    var _TueChecked = "";
                    var _wedChecked = "";
                    var _ThurChecked = "";
                    var _friChecked = "";
                    var _satChecked = "";
                    var _sunChecked = "";
                    if (Model.MonPlay != 0) { _monChecked = "checked"; }
                    if (Model.TuePlay != 0) { _TueChecked = "checked"; }
                    if (Model.WedPlay != 0) { _wedChecked = "checked"; }
                    if (Model.ThuPlay != 0) { _ThurChecked = "checked"; }
                    if (Model.FriPlay != 0) { _friChecked = "checked"; }
                    if (Model.SatPlay != 0) { _satChecked = "checked"; }
                    if (Model.SunPlay != 0) { _sunChecked = "checked"; }                             
                            }
                            <span>        <input type="checkbox" name="chk_group" value="value1" @_monChecked/> Mon.</span>
                            <span>        <input type="checkbox" name="chk_group" value="value1" @_TueChecked/> Tue.</span>
                            <span>        <input type="checkbox" name="chk_group" value="value1" @_wedChecked/> Wed.</span>
                            <span>        <input type="checkbox" name="chk_group" value="value1" @_ThurChecked/> Thu.</span>
                            <span>        <input type="checkbox" name="chk_group" value="value1" @_friChecked/> Fri.</span>
                            <span>        <input type="checkbox" name="chk_group" value="value1" @_satChecked/> Sat.</span>
                            <span>        <input type="checkbox" name="chk_group" value="value1" @_sunChecked/> Sun.</span>
                        </div>    
                        </fieldset>
                        <div class="btn-bar">
                            <input type="submit" class="btn btn-primary" value="Save" />
                            @Html.ActionLink("Cancel", "Index", null, new { @class = "btn btn-primary" })
                        </div>
                    </div> <!--end div #program-form -->
                    </div> <!--end div #program-form -->
                    <!-- Content txt & igms content-------------------------------------------------->
                    <div id="view2" class="tabcontent">
                        <div style="border-bottom: 1px solid #B7B7B7;">
                        <div id="view2_img1" class="content-form">
                            <table>
                                <tr>
                                    <td style="height:25px;">
                                    </td>
                                    <td >
                                    </td>
                                    
                                </tr>
                                    <tr>
                                    <td>
                                        <label class="control-label" for="input01">X</label>
                                    </td>
                                    <td>
                                            <input id="contentImg_X" type="number" min = "0" max = "1000" step = "1" value="@_contentImg.Img_x"  />
                                            
                                    </td>                                    
                                </tr>
                               
                                    <tr>
                                    <td>
                                        <label class="control-label" for="input01">Y:  </label>
                                    </td>
                                    <td>
                                            <input id="contentImg_Y" type="number" min = "0" max = "10000" step = "1" value="@_contentImg.Img_y"  />
                                            
                                    </td>
                                </tr>
                             
                                    <tr>
                                    <td>
                                        <label class="control-label" for="input01">Width:  </label>
                                    </td>
                                    <td>
                                        <input id="contentImg_Width" type="number" min = "0" max = "1000" step = "1" value="@_contentImg.Img_Width"  />
                                        
                                    </td>
                                </tr>
                                
                                <tr>
                                    <td>
                                        <label class="control-label" for="input01">height:  </label>
                                    </td>
                                    <td>
                                        <input id="contentImg_Height"t type="number" min = "0" max = "1000" step = "1" value="@_contentImg.Img_Height" />
                                        
                                    </td>
                                </tr>

                                <tr>
                                    <td>
                                        <label class="control-label" for="input01">Method</label>
                                    </td>
                                    <td >
                                        <select>
                                          <option value="static">Static</option>
                                          <option value="random">Random</option>                                          
                                        </select>   
                                          
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <label class="control-label" for="input01">Run Speed</label>
                                    </td>
                                    <td>
                                        <select>
                                          <option value="static">1</option>
                                          <option value="random">2</option>                                          
                                        </select>      
                                        
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                    </td>
                                    <td>
                                        <span class="btn btn-success fileinput-button" style="float: right;">
                                        <i class="icon-plus icon-white"></i><span>images</span>
                                            <input id="fileupload" type="file" name="files[]" 
                                            data-url="@Url.Content("~/lib/imgs/ImgUploadJson")" 
                                            accept="image/jpg|image/bmp"  multiple >
                                        </span>
                                    </td>
                                </tr>
                            </table>
                        </div><!-- End div#view2_img1  -->    
                        <div id="view2_txt1" class="content-form">
                          
                            <table>
                                <tr>
                                    <td>
                                        <label class="control-label" for="input01">Text:  </label>
                                    </td>
                                    <td colspan=3> 
                                        <input id="" type="text" size="20" style="width: 280px"  id="input01" value="@_contentTex.TxtFileName">
                                        
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <label class="control-label" for="input01">X:  </label>
                                    </td>
                                    <td>
                                        <input id="contentTxt_X" type="number" min = "0" max = "100" step = "1" value="@_contentTex.Txt_x" />
                                    </td>
                                    <td style="text-align:right; padding-right:5px;">
                                        Font name
                                    </td>
                                    <td>
                                        <select>
                                            <option value="static">Arial</option>
                                            <option value="random">Time new roman</option> 
                                        </select>
                                        
                                    </td>

                                </tr>
                               
                                    <tr>
                                    <td>
                                        <label class="control-label" for="input01">Y:  </label>
                                    </td>
                                    <td>
                                        <input id="contentTxt_Y" type="number" min = "0" max = "1000" step = "1" value="@_contentTex.Txt_y" />
                                        
                                    </td>
                                    <td style="text-align:right; padding-right:5px;">
                                        Font size
                                    </td>
                                    <td>
                                        <input type="number" min = "0" max = "1000" step = "1" value="@_contentTex.FontSize" />
                                        
                                    </td>
                                </tr>
                             
                                    <tr>
                                    <td>
                                        <label class="control-label" for="input01">Width:  </label>
                                    </td>
                                    <td>
                                            <input id="contentTxt_Width" type="number" min = "0" max = "1000" step = "1" value="@_contentTex.Txt_Width" />
                                        
                                    </td>
                                    <td style="text-align:right; padding-right:5px;">
                                        Bold
                                    </td>
                                    <td>
                                        <select>
                                            <option value="static">yes</option>
                                            <option value="random">No</option> 
                                        </select>
                                        
                                    </td>
                                </tr>
                                
                                <tr>
                                    <td>
                                        <label class="control-label" for="input01">Height:  </label>
                                    </td>
                                    <td>
                                            <input id="contentTxt_Height" type="number" min = "0" max = "1000" step = "1" value="@_contentTex.Txt_Height"/>
                                        
                                    </td>
                                    <td style="text-align:right; padding-right:5px;">
                                        Font color
                                    </td> 
                                    <td>
                                        <select>
                                            <option value="Red" selected>Red</option>
                                            <option value="Green">Green</option> 
                                        </select>
                                        
                                    </td>
                                </tr>

                                <tr>
                                    <td>
                                        <label class="control-label" for="input01">Method</label>
                                    </td>
                                    <td >
                                        <select>
                                          <option value="static" selected>Static</option>
                                          <option value="random">Random</option>                                          
                                        </select>   
                                    </td>
                                    <td></td>
                                    <td></td>
                                </tr>
                                <tr>
                                    <td>
                                        <label class="control-label" for="input01">Run Speed</label>
                                    </td>
                                    <td>
                                        <select>
                                          <option value="1" selected>1</option>
                                          <option value="2">2</option>                                          
                                        </select>      
                                    </td>
                                    <td></td>
                                    <td></td>
                                </tr>
                            </table>
                        </div><!-- End div#view2_txt1  -->
                        <div class="clearfix"></div>
                        </div>            
                    
                    <div class="btn-bar">
                        <button class="btn btn-primary">Select Template</button>
                        <input type="submit" class="btn btn-primary" value="Save" />
                        @Html.ActionLink("Cancel", "Index", null, new { @class = "btn btn-primary" })
                    </div>

                    </div><!-- End div#view 2 : Content txt & igms content -->
                </div>  

                }
        </div> <!-- end contenContainer -->
    </div>
    <div class="clearfix"></div>
</div>

